<template>
  <div>
    <!-- ref引用组件 -->
    <ComB ref="myComB" />
    <button @click="getContent2">获取组件实例身上的东西</button>

    <!-- ref引用原生标签 -->
    <div ref="cqfdiv">我是{{ username }}</div>
    <button @click="getContent">获取div的内容</button>

    <h2>schoolName:{{ schoolName }}</h2>
    <h2>address:{{ address }}</h2>
    <button @click="handler2">改</button>
    <h2>name:{{ name }}</h2>
    <h2>age:{{ age }}</h2>
    <button @click="handler">改</button>

  </div>
</template>

<script setup>
import { ref, toRef, toRefs, useTemplateRef, nextTick } from 'vue'
import ComB from './components/ComB.vue'
const users = ref({ name: '林加福', age: 20 })
const school = ref({ schoolName: '家里蹲大学', address: '家里' })
const username = ref('程泉峰')
const divEleRef = useTemplateRef('cqfdiv')
const myComBRef = useTemplateRef('myComB')

const name = toRef(users.value, 'name')
const age = toRef(users.value, 'age')

const { schoolName, address } = toRefs(school.value)

const getContent2 = () => {
  // 组件实例
  console.log(myComBRef.value.money)
  console.log(myComBRef.value.add(100, 200))
}


const getContent = async () => {
  username.value = '李敏' // 数据更新是异步的
  // nextTick(() => {
  //   // DOM一定是最新的
  //   console.log(divEleRef.value.innerText)
  // })

  await nextTick()
  console.log(divEleRef.value.innerText)

}

const handler2 = () => {
  schoolName.value = '学校顿'
  address.value = '学校'
}

const handler = () => {
  name.value = '谢起珍'
  age.value = 30
}


</script>
